<template>
  <div class="wrapper">
    <div class="input-data">
      <input type="text" required />
      <div class="underline"></div>
      <label>{{ value }}</label>
    </div>
  </div>
</template>

<script>
export default {
  props: ["value"],
}
</script>

<style lang="less" scoped>
.wrapper {
  // width: 100%;
  background-color: #fff;
  /* 内边距（上下左右） */
  padding: 15px;
  /* 盒子阴影 */
  // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  /* 圆角 */
  // border-radius: 8px;
}
.wrapper .input-data {
  /* 相对定位 */
  position: relative;
  width: 100%;
  height: 40px;
}
.wrapper .input-data input {
  width: 100%;
  height: 100%;
  border: none;
  font-size: 17px;
  border-bottom: 2px solid #c0c0c0;
}
/* 输入框获得焦点时 */
.wrapper .input-data input:focus ~ label,
/* 输入框的值为合法时 */
.wrapper .input-data input:valid ~ label {
  /* label上移，同时改变字号、字体颜色 */
  transform: translateY(-25px);
  font-size: 15px;
  color: #2c6fdb;
}
.wrapper .input-data label {
  /* 绝对定位 */
  position: absolute;
  bottom: 10px;
  left: 0px;
  color: #808080;
  /* 这个属性可以使点击label穿透到输入框 */
  pointer-events: none;
  /* 现在动画有点生硬，在这里需要给动画加个过渡 */
  transition: all 0.3s ease;
}
.wrapper .input-data .underline {
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 100%;
  background-color: #2c6fdb;
  /* 沿X轴缩小 */
  transform: scaleX(0);
  /* 这里同样给动画加个过渡 */
  transition: all 0.3s ease;
}
.wrapper .input-data input:focus ~ .underline,
.wrapper .input-data input:valid ~ .underline {
  /* 沿X轴放大 */
  transform: scaleX(1);
}
</style>
